<template>
	<view class="page">
		<view class="title_bar">
			<view class="title">
				系统消息
			</view>
			<view class="isRead" @click="allRead">
				全部已读
			</view>
		</view>
		<!-- 消息列表 -->
		<view class="message_lists">
			<view class="message_list" v-for="(item,index) in messages" :key="index">
				<uni-badge class="uni-badge-left-margin" :offset="[3, 3]" :is-dot="item.isDot" :text="item.isDot?'0':''" absolute="rightTop" size="large">
					<image style="width: 70rpx;" src="https://cdn8.axureshop.com/demo/2208121/images/%E6%B6%88%E6%81%AF%E4%B8%AD%E5%BF%83/u7364.png" mode="widthFix"></image>
				</uni-badge>
				<view class="main_content">
					<view class="title_time">
						<view class="notict_title">
							{{item.title}}
						</view>
						<view class="time">
							{{item.time}}
						</view>
					</view>
					<view class="notice_content">
						{{item.content}}
					</view>
				</view>
			</view>
		</view>
		<!-- 底部导航栏 -->
		<!-- <Tabbar></Tabbar> -->
	</view>
</template>

<script setup>
import { reactive } from 'vue';

	const messages = reactive([
		{
			title:'挂号成功通知',
			time:'1分钟前',
			isDot:true,
			content:'您已挂号成功，请按照预约时间到院就诊。'
		},
		{
			title:'缴费通知',
			time:'3天前',
			isDot:true,
			content:'您有一笔门诊待支付订单，订单将在30内自动取消，请及时支付。'
		}
	])
	// 全部已读
	const allRead = () => {
		messages.forEach((item)=>{
			if(item.isDot){
				item.isDot=false
			}
		})
	}
</script>

<style lang="scss" scoped>
	.page{
		background-color: rgba(242, 242, 242, 0.364705882352941);
		min-height: 100vh;
		padding: 0 40rpx;
		box-sizing: border-box;
		.title_bar{
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI', sans-serif;
			font-size: 28rpx;
			color: #1677FF;
			.title{
				font-weight: 700;
				color: #333;
				font-size: 36rpx;
			}
		}
		.message_lists{
			margin-top: 26rpx;
			.message_list{
				width: 100%;
				display: flex;
				padding-bottom: 40rpx;
				box-sizing: border-box;
				border-bottom: 2rpx solid #f2f2f2;
				margin-top: 38rpx;
				.uni-badge-left-margin {
					// margin-left: 20rpx;
					.box {
						width: 80rpx;
						height: 80rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						text-align: center;
						background-color: #DCDFE6;
						color: #fff;
						font-size: 24rpx;
						.box-text {
							text-align: center;
							color: #fff;
							font-size: 24rpx;
						}
					}
				}
				.main_content{
					width:566rpx ;
					font-family: 'Microsoft YaHei UI', sans-serif;
					font-size: 14rpx;
					color: #7F7F7F;
					margin-left: 30rpx;
					.title_time{
						display: flex;
						align-items: baseline;
						justify-content: space-between;
						margin-bottom: 22rpx;
						.notict_title{
							font-size: 32rpx;
							color: #000;
						}
						.time{
							font-size: 24rpx;
							color: #aaa;
						}
					}
					.notice_content{
						font-size: 28rpx;
						line-height: 40rpx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2; /* 限制显示的行数 */
						overflow: hidden;
						text-overflow: ellipsis; /* 当内容超出时显示省略号 */
						white-space: normal; /* 允许正常的空白符处理 */
					}
				}
			}
		}
	}       
</style>
